<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="zh_CN-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>吾起扬-作品主页</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap-4.3.1.css" rel="stylesheet">
	</head>
  <body>
	<a name="主页" id="主页"></a>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">吾起扬-作品主页</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="Index.htm">主页<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#关于我">关于</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">展示区</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="https://space.bilibili.com/692730692">我的哔哩哔哩主页</a>
              <a class="dropdown-item" href="sumiao.html">素描作品展示</a>
              <a class="dropdown-item" href="#">Java作品展示</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <audio controls="controls" >
            <source src="other/DAOKO (ダヲコ) _ 米津玄師 (よねづ けんし) - 打上花火.mp3" type="audio/mp3">
          </audio>
        </form>
      </div>
    </nav>
    <div class="container mt-2">
      <div class="row">
        <div class="col-12">
          <div class="jumbotron">
            <h1 class="text-center">吾起扬-作品主页</h1>
            <div class="row justify-content-center">
              <div class="col-auto">
                <p><a class="btn btn-success btn-lg" href="#关于我" role="button">关于我</a> </p>
              </div>
              <div class="col-auto">
                <p><a class="btn btn-primary btn-lg" href="#" role="button">进入展示区</a> </p>
              </div>
            </div>
            <p class="text-center">欢迎大家!</p>
            <img src="images/1200X400.png" alt="" class="img-fluid"> 
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="text-center col-md-6 col-12">
          <h3>关于素描</h3>
          <p>素描的操作定义:使用单一色彩表现明度变化的绘画。绘画工具而在画面载体上按照一定的绘制原则而有意塑造物体形态的美术活动。速写是素描的一种变式。素描水平是反映绘画者空间造型能力的重要指标之一。</p>
		  <div><img src="images/Image_sumiao_3.jpg" alt="" height="191"/><img src="images/Image_sumiao.jpg" alt="" height="191"/><img src="images/Image_sumiao_2.jpg" alt="" height="191"/></div>
        </div>
   	    <div class="text-center col-md-6 col-12">
          <h3>关于Java</h3>
          <p>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程 。</p>
		  <div><img src="images/Image_java.jpg" alt="" height="191"/><img src="images/Image_java_2.jpg" alt="" height="191"/></div>
	  </div>
     </div>
    </div>
      <h2 class="text-center">视频展示</h2>
      <div class="container">
        <div class="row">
          <div class="col-12"> 
			  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  				<tbody>
    				<tr>
      					<td style="text-align: center">
							<h5>素描展示 </h5>
							<div class="embed-responsive embed-responsive-16by9"><iframe src="//player.bilibili.com/player.html?aid=205158265&bvid=BV1fh411U7c1&cid=325562290&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
                        </div></td>
      					<td style="text-align: center">
							<h5>编程展示 </h5>
						  <div class="embed-responsive embed-responsive-16by9"><iframe src="//player.bilibili.com/player.html?aid=545690898&bvid=BV1nq4y1E733&cid=342651723&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></div>
					  </td>
    				</tr>
  				</tbody>
			  </table>
		  </div>
	    </div>
      </div>
    <div class="container mt-4">
      <div class="row">
        <div class="col-sm-6">
          <div class="card">
            <img class="card-img-top" src="images/600X300.png" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">我的素描作品&nbsp;</h5>
              <p class="card-text">这里有我的素描作品和范画，支持下载！&nbsp;</p>
              <a href="#" class="btn btn-primary">跳转</a>
            </div>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="card">
            <img src="images/600X300_2.png" alt="Card image cap" class="card-img-top">
            <div class="card-body">
              <h5 class="card-title">我的Java作品&nbsp;</h5>
              <p class="card-text">这里有我的Java作品，暂时没有开源！</p>
              <a href="#" class="btn btn-primary">跳转</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr>
	  <div class="container">
      <div class="row">
		  <a name="关于我" id="关于我"></a>
		  <table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
  			<tbody>
    			<tr>
      			<td>
					<div>
					<h1>关于我</h1>
					<h3>你好！</h3>
    				<h5>不管你是谁，欢迎你来我的网站！</h5>
    				<hr>
    				<p>这里我会和你讲一些我故事！ </p>
    				<p>哦，你还不知道我叫啥啊！我就是这个网站的开发者——<strong>吾起扬</strong></p>
					<p>这个网站中你叫我<strong>站长</strong>哦！</p> 
					<h5><strong>吾起扬联系：</strong></h5> 
        			<p>邮箱：<a href="mailto:#">13776821944@protonmail.com</a></p>
            		<p><abbr title="Phone">电话:</abbr>13776821944</p> 
	  			  </div>
					</td>
    			</tr>
  			</tbody>
		  </table>
		</div>
	</div>
	<div class="col-lg-4 col-md-6 col-12"><strong><a href="#主页">回到顶端</a></strong></div>
    <hr>
    <footer class="text-center">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <p>Copyright © wuqiyang. All rights reserved.</p>
          </div>
        </div>
      </div>
    </footer>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="file:///F|/js/jquery-3.3.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="file:///F|/js/popper.min.js"></script>
    <script src="file:///F|/js/bootstrap-4.3.1.js"></script>
  </body>
</html>